<template>
  <a-drawer
    title="区域详情"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    placement="left"
    :closable="true"
    :visible="visible"
    :width="450"
    :height="550"
    @close="onClose"
  >
    <a-button class="btn" type="primary" @click="onExport" :loading="loadingExport"> 一键导出 </a-button>
    <CustomTable
      ref="table"
      :showAlert="false"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      :showSelection="false"
      :showPagination="true"
      :customRow="clickCustomRow"
      rowKey="id"
      @change="onTableChange"
    >
    </CustomTable>
  </a-drawer>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/wxSmuggle/areaEvent.js'
import { downLoadMix } from '@/utils/export-util/util'
export default {
  props: ['visible', 'row'],
  components: { CustomTable },
  data() {
    return {
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => `${(this.pageData.current - 1) * this.pageData.size + (index + 1)}` //序号分页后连续
        },
        {
          title: '基站名称',
          dataIndex: 'address',
          align: 'center',
          scopedSlots: { customRender: 'address' }
        },
        {
          title: '经度',
          dataIndex: 'longtitude',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'longtitude' }
        },
        {
          title: '纬度',
          dataIndex: 'latitude',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'latitude' }
        }
      ],
      loading: false,
      loadingExport: false
    }
  },
  methods: {
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            _this.$emit('clickRow', record)
          }
        }
      }
    },
    async refreshTable() {
      this.pageFilter.areaId = this.row.id
      this.pageFilter.areaName = this.row.name
      this.loading = true
      api
        .getBaseStationByAreaId(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onExport() {
      this.loadingExport = true
      api
        .exportXls({ areaId: this.row.id, areaName: this.row.name })
        .then(res => {
          const fileName = '基站信息表.xls'
          downLoadMix(res, fileName)
        })
        .catch(err => {
          this.$message.warn('导出失败！')
        })
        .finally(() => {
          this.loadingExport = false
        })
    },
    onClose() {
      // this.visible = false
      this.$emit('closeDrawer')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-drawer-body{
  position: relative;
}
.btn {
  position: absolute;
  top: -40px;
  left: 190px;
}
/deep/.ant-drawer-header {
  background-color: #f2f2f2 !important;
}
/deep/.ant-pagination li{
  margin-bottom: 10px;
}
// /deep/.ant-drawer-title {
//   color: #fff;
// }
// /deep/.ant-drawer-close {
//   color: #fff;
// }
// /deep/.ant-drawer-header {
//   background-color: rgba(91, 116, 133, 0.8);
// }
// /deep/.ant-drawer-content {
//   background-color: rgba(79, 97, 111, 0.2);
// }
// /deep/ .ant-table-thead > tr > th {
//   color: #fff;
//   // background: transparent;
//   background-color: rgba(76, 97, 112, 0.8);
// }
// /deep/.ant-table-tbody > tr > td {
//   color: #fff;
// }
// /deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
//   // background: transparent;
//   background-color: rgba(76, 97, 112, 0.8);
// }
/deep/.ant-table-row {
  cursor: pointer;
}
</style>
